<template>

	<div class="index">
		<transition :name='tranName'>
			<router-view></router-view>
		</transition> 

		<footer>
			<ul>
				<li>
					<a href="#/"><i class="fa fa-home"></i><span>首页</span></a>
				</li>
				<li>
					<a href="#/buller/car"><i class="fa fa-shopping-cart"></i><span>购物车</span></a>
				</li>
				<li>
					<a href="#/buller/message"><i class="fa fa-wechat"></i><span>消息</span></a>
				</li>
				<li>
					<a href="#/buller/self"><i class="fa fa-user"></i><span>我的</span></a>
				</li>
			</ul>
		</footer>
	</div>

</template>

<script>
	import $ from 'jquery'

	export default {

		data: function() {
			return {
				tranName:'sellerTwo'
			}
		},
		components: {

		},
		watch: {　　　
			'$route' (to,from ) {　
//				console.log(to.path)
				if(to.path=='/' || to.path=='/buller/car'|| to.path=='/buller/message' || to.path=='/buller/self'){
					$('footer').css('display','block');
				}else{
					$('footer').css('display','none');
				}
				
				if(to.path == '/'){
					
					if(from.path == '/buller/car'||from.path == '/buller/message'
					|| from.path == '/buller/self'){
						this.tranName = 'sellerTwo'
						
					}
				}
				if(to.path == '/buller/self'){
					
					if(from.path == '/buller/car'||from.path == '/buller/message'
					|| from.path == '/'){
						this.tranName = 'sellerLg'
						
					}
				}
				
				
				if(to.path == '/buller/car'){
					
					if(from.path == '/buller/message'||from.path == '/buller/self'){
						this.tranName = 'sellerTwo'
						
					}else{
						this.tranName = 'sellerLg'
					}
				}
				
				
				if(to.path == '/buller/message'){
					
					if(from.path == '/buller/car'||from.path == '/'){
						this.tranName = 'sellerLg'
						
					}else{
						this.tranName = 'sellerTwo'
					}
				}
				

				　　　
				　　　　
			}　
		},
		mounted: function() {
		
			if(this.$route.path=='/' || this.$route.path=='/buller/car'|| this.$route.path=='/buller/message' || this.$route.path=='/buller/self'){
					$('footer').css('display','block');
				}else{
					$('footer').css('display','none');
				}
		

			if(	this.$route.path == '/'){
					$('footer ul li').eq(0).addClass('active').siblings().removeClass('active');		
				}
			if(	this.$route.path == '/buller/car'){
					$('footer ul li').eq(1).addClass('active').siblings().removeClass('active');		
				}
			if(	this.$route.path == '/buller/message'){
					$('footer ul li').eq(2).addClass('active').siblings().removeClass('active');		
				}
			if(	this.$route.path == '/buller/self'){
					$('footer ul li').eq(3).addClass('active').siblings().removeClass('active');		
				}
			$('footer ul li').click(function(){
				
				var ins = $(this).index();
				$(this).addClass('active').siblings().removeClass('active');
				
				})

		}

	}
</script>

<style scoped>
	.sellerLg-enter {
		opacity: 0;
		width: 100%;
		transform: translateX(100%);
		position: absolute;
	
	}

	.sellerLg-enter-active,
	.sellerLg-leave-active {
		transition: all 0.5s;
		
	}
	
	.sellerLg-leave-to {
		top: 0;
		opacity: 0;
		width: 100%;
		transform: translateX(-100%);
		position: absolute;
	
	}
	
	.sellerTwo-enter {
		position: absolute;
		opacity: 0;
		width: 100%;
		transform: translateX(-100%);
		
			
	}
	
	.sellerTwo-enter-active,
	.sellerTwo-leave-active {
		transition: all 0.5s;
	}
	
	.sellerTwo-leave-to {
		opacity: 0;
		width: 100%;
		transform: translate(100%);
		position: absolute;
	}
	footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 99;
		background: #eee;
		padding: 5px 0;
		border-top: solid 1px darkgray;
	}
	
	footer ul {
		overflow: hidden;
		padding: 0;
		margin: 0;
		width: 100%;
	}
	
	footer ul li {
		float: left;
		width: 25%;
		text-align: center;
	}
	
	footer ul li a {
		font-size: 14px;
		text-align: center;
		display: block;
		width: 100%;
	}
	
	footer ul li a span {
		display: block;
		margin: 0;
		padding: 0;
		line-height: 14px;
	}
	
	.active a {
		color: orangered;
	}
	
</style>